<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>移动端病历查看 - 交互原型</title>
    <style>
      :root {
        --brand: #2a7de1;
        --brand-600: #1f63b5;
        --bg: #f6f8fb;
        --card: #ffffff;
        --text: #1a1f36;
        --muted: #6b7280;
        --border: #e5e7eb;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --shadow: 0 8px 24px rgba(18, 38, 63, 0.12);
        --radius: 14px;
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        color: var(--text);
        background: linear-gradient(135deg, #eef3fb 0%, #f8fafc 100%);
      }
      .canvas {
        height: 100vh;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 18px;
        padding: 18px;
      }
      /* Device preview */
      .phone {
        width: 390px; /* iPhone 12 logical width */
        height: 844px; /* iPhone 12 logical height */
        background: var(--bg);
        border-radius: 36px;
        box-shadow: 0 20px 60px rgba(16,24,40,0.18);
        border: 1px solid rgba(17, 24, 39, 0.06);
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }
      .notch {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        height: 24px;
        background: #0b1220;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
        z-index: 2;
      }
      .screen {
        position: absolute;
        inset: 0;
        padding: 54px 16px 18px; /* leave room for notch */
        overflow: hidden; /* keep one-screen snapshot */
      }
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      .header .title {
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.2px;
      }
      .header .actions {
        display: flex;
        gap: 8px;
      }
      .icon-btn {
        width: 34px; height: 34px;
        display: grid; place-items: center;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--muted);
        cursor: pointer;
        transition: all .18s ease;
      }
      .icon-btn:hover { box-shadow: var(--shadow); color: var(--brand); }

      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 14px;
      }
      .patient-card {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
      }
      .avatar {
        width: 56px; height: 56px; border-radius: 50%;
        background: linear-gradient(135deg, #cfe4ff, #a6c8ff);
        display: grid; place-items: center; font-weight: 700; color: #1c3f7b;
      }
      .p-info { line-height: 1.15; }
      .p-name { font-weight: 700; font-size: 16px; }
      .p-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
      .tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
      .tag {
        font-size: 11px; padding: 2px 8px; border-radius: 999px;
        border: 1px solid var(--border); background: #f9fafb; color: #475569;
      }
      .btn-primary {
        padding: 8px 12px; border-radius: 10px; border: 0; cursor: pointer;
        background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
        color: #fff; font-weight: 600; box-shadow: 0 6px 14px rgba(42, 125, 225, 0.34);
        transition: transform .12s ease, box-shadow .2s ease;
      }
      .btn-primary:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(42,125,225,.28); }

      .section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .mini-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
      .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; align-items: center; }
      .k { color: var(--muted); }
      .v { font-weight: 600; }

      .pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px; border-radius: 999px; background: #f1f5f9; color: #0f172a; font-weight: 600; font-size: 12px;
      }
      .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

      .footer-actions {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
      }
      .btn-outline {
        padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 600; cursor: pointer;
      }

      /* Modal */
      .overlay {
        position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45);
        display: none; align-items: flex-end; padding: 0 0 0; /* bottom sheet */
      }
      .overlay.show { display: flex; }
      .sheet {
        width: 100%; background: var(--card); border-top-left-radius: 18px; border-top-right-radius: 18px;
        box-shadow: 0 -12px 30px rgba(2, 6, 23, 0.28);
        max-height: 74%;
        animation: slideUp .22s ease-out;
      }
      @keyframes slideUp { from { transform: translateY(20px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
      .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 1; }
      .drag { width: 46px; height: 5px; border-radius: 999px; background: #e2e8f0; margin: 8px auto; }
      .sheet-title { font-weight: 700; font-size: 15px; }
      .tabs { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); overflow: auto; }
      .tab { padding: 6px 10px; border-radius: 10px; background: #f1f5f9; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap; }
      .tab.active { background: rgba(42,125,225,0.12); color: var(--brand); }
      .sheet-body { padding: 12px 14px 18px; overflow: auto; max-height: calc(74vh - 96px); }
      .list { display: grid; gap: 8px; }
      .list-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
      .list-item .title { font-weight: 700; font-size: 14px; }
      .list-item .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

      /* Design notes */
      .notes {
        height: 100%;
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(8px);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 16px;
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .notes h3 { margin: 0 0 8px; font-size: 16px; }
      .notes .small { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
      .notes ul { margin: 0; padding-left: 16px; }
      .notes li { margin: 6px 0; font-size: 13px; }
      .swatches { display: flex; gap: 8px; margin: 8px 0 2px; }
      .swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); }
      .swatch.brand { background: var(--brand); }
      .swatch.bg { background: var(--bg); }
      .swatch.card { background: var(--card); }
      .swatch.accent { background: #10b981; }
      .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: #f1f5f9; border: 1px solid var(--border); padding: 0 6px; border-radius: 6px; font-size: 12px; }
      .divider { height: 1px; background: var(--border); margin: 10px 0; }

      /* Icons */
      .i { width: 18px; height: 18px; }
      .i path { fill: currentColor; }

      /* Make sure everything fits one screen on common laptops */
      @media (max-width: 1100px) {
        .canvas { max-width: 980px; grid-template-columns: 420px 1fr; }
      }
      @media (max-width: 900px) {
        /* Stack if viewport is too small */
        .canvas { grid-template-columns: 1fr; height: auto; overflow: auto; }
        .notes { margin-top: 12px; }
      }
    </style>
  </head>
  <body>
    <div class="canvas">
      <div class="phone" role="region" aria-label="移动端病历预览">
        <div class="notch"></div>
        <div class="screen">
          <div class="header">
            <div class="title">病历查看</div>
            <div class="actions">
              <button class="icon-btn" aria-label="搜索" title="搜索">
                <svg class="i" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
              </button>
              <button class="icon-btn" aria-label="更多" title="更多">
                <svg class="i" viewBox="0 0 24 24"><path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
              </button>
            </div>
          </div>

          <div class="card patient-card">
            <div class="avatar">王</div>
            <div class="p-info">
              <div class="p-name">王小明 <span class="pill"><span class="dot"></span> 在院观察</span></div>
              <div class="p-sub">男 · 32岁 · 门诊号 008132 · A 型</div>
              <div class="tags">
                <span class="tag">对青霉素过敏</span>
                <span class="tag">既往：鼻炎</span>
                <span class="tag">BMI 22.1</span>
              </div>
            </div>
            <div>
              <button class="btn-primary" id="btnDetails">查看详情</button>
            </div>
          </div>

          <div class="section-grid">
            <div class="card">
              <div class="mini-title">生命体征</div>
              <div class="kv">
                <div class="k">体温</div><div class="v">36.8℃</div>
                <div class="k">心率</div><div class="v">74 bpm</div>
                <div class="k">血压</div><div class="v">118/76 mmHg</div>
                <div class="k">血氧</div><div class="v">98%</div>
              </div>
            </div>
            <div class="card">
              <div class="mini-title">初步诊断</div>
              <div class="kv">
                <div class="k">主诉</div><div class="v">咽痛、低热 2 天</div>
                <div class="k">诊断</div><div class="v">急性上呼吸道感染</div>
                <div class="k">分级</div><div class="v" style="color: var(--warning);">轻度</div>
                <div class="k">风险</div><div class="v">低</div>
              </div>
            </div>
          </div>

          <div class="card" style="margin-top: 12px;">
            <div class="mini-title">当前用药</div>
            <div class="list">
              <div class="list-item">
                <div>
                  <div class="title">布洛芬缓释胶囊 0.3g</div>
                  <div class="sub">口服 · q8h · 共 3 天</div>
                </div>
                <button class="btn-outline open-sheet">详情</button>
              </div>
              <div class="list-item">
                <div>
                  <div class="title">咽炎含片</div>
                  <div class="sub">含服 · prn · 疼痛时使用</div>
                </div>
                <button class="btn-outline open-sheet">详情</button>
              </div>
            </div>
            <div class="footer-actions">
              <button class="btn-outline">导出 PDF</button>
              <button class="btn-primary">联系医生</button>
            </div>
          </div>

          <!-- Modal / Bottom Sheet -->
          <div class="overlay" id="overlay" aria-hidden="true" aria-label="详情面板">
            <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="sheetTitle">
              <div class="drag"></div>
              <div class="sheet-header">
                <div class="sheet-title" id="sheetTitle">病历详情</div>
                <button class="icon-btn" id="btnClose" aria-label="关闭">
                  <svg class="i" viewBox="0 0 24 24"><path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.41L10.59 13.41 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.3 10.59 10.59 16.89 4.3z"/></svg>
                </button>
              </div>
              <div class="tabs" id="tabs">
                <div class="tab active" data-tab="summary">病历摘要</div>
                <div class="tab" data-tab="allergy">过敏史</div>
                <div class="tab" data-tab="history">既往史</div>
                <div class="tab" data-tab="labs">检验检查</div>
              </div>
              <div class="sheet-body">
                <div class="tab-panel" data-panel="summary">
                  <div class="mini-title">本次就诊</div>
                  <div class="kv" style="margin-bottom:8px;">
                    <div class="k">时间</div><div class="v">2025-09-12 10:24</div>
                    <div class="k">科室</div><div class="v">呼吸内科</div>
                    <div class="k">医生</div><div class="v">刘畅 主治医师</div>
                  </div>
                  <div class="mini-title">建议与随访</div>
                  <div style="font-size: 13px; line-height: 1.5; color:#0f172a;">
                    多饮水，注意休息，避免受凉；若持续发热 ≥38.5℃ 或症状加重，请及时复诊。
                  </div>
                </div>
                <div class="tab-panel" data-panel="allergy" hidden>
                  <div class="list">
                    <div class="list-item"><div><div class="title">青霉素</div><div class="sub">皮疹，呼吸不适 · 严重</div></div></div>
                    <div class="list-item"><div><div class="title">花粉</div><div class="sub">打喷嚏，鼻塞 · 轻度</div></div></div>
                  </div>
                </div>
                <div class="tab-panel" data-panel="history" hidden>
                  <div class="list">
                    <div class="list-item"><div><div class="title">儿童期哮喘史</div><div class="sub">无住院史，已缓解</div></div></div>
                    <div class="list-item"><div><div class="title">慢性鼻炎</div><div class="sub">季节性加重</div></div></div>
                  </div>
                </div>
                <div class="tab-panel" data-panel="labs" hidden>
                  <div class="list">
                    <div class="list-item">
                      <div><div class="title">血常规</div><div class="sub">WBC 8.1×10^9/L · 中性粒 62%</div></div>
                      <span class="pill" style="justify-self:end"><span class="dot" style="background: var(--success);"></span> 正常</span>
                    </div>
                    <div class="list-item">
                      <div><div class="title">CRP</div><div class="sub">5 mg/L</div></div>
                      <span class="pill" style="justify-self:end"><span class="dot" style="background: var(--warning);"></span> 轻高</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <aside class="notes" aria-label="设计说明">
        <h3>病历查看 - 设计说明</h3>
        <div class="small">定位：轻医疗场景下的移动端信息展示与快速决策。</div>
        <div class="divider"></div>
        <ul>
          <li><strong>信息结构</strong>：基本信息卡 + 关键指标 + 用药列表 + 底部行动。</li>
          <li><strong>交互形式</strong>：点击“查看详情/详情”唤起底部抽屉，标签切换不同信息域。</li>
          <li><strong>可达性</strong>：可点击区域 ≥44px；支持 <span class="kbd">Esc</span> 关闭，遮罩点击关闭。</li>
          <li><strong>视觉基调</strong>：Brand <span class="swatches"><span class="swatch brand"></span><span class="swatch bg"></span><span class="swatch card"></span><span class="swatch accent"></span></span></li>
          <li><strong>层级体系</strong>：卡片阴影强调分组；抽屉顶部粘性头部承载操作。</li>
          <li><strong>一屏展示</strong>：原型与说明共置于 1200px 画布内，便于截图裁剪。</li>
        </ul>
        <div class="divider"></div>
        <ul>
          <li><strong>组件</strong>：头像卡、标签、胶囊状态、列表单元、抽屉、标签页。</li>
          <li><strong>动效</strong>：抽屉 220ms 上滑；按钮按压细微位移与阴影收敛。</li>
          <li><strong>扩展性</strong>：模块化卡片与列表，可插拔更多区块（检验、影像）。</li>
        </ul>
      </aside>
    </div>

    <script>
      const overlay = document.getElementById('overlay');
      const openers = document.querySelectorAll('.open-sheet');
      const btnDetails = document.getElementById('btnDetails');
      const btnClose = document.getElementById('btnClose');
      const tabs = document.getElementById('tabs');

      function openSheet() {
        overlay.classList.add('show');
        overlay.setAttribute('aria-hidden', 'false');
      }
      function closeSheet() {
        overlay.classList.remove('show');
        overlay.setAttribute('aria-hidden', 'true');
      }
      btnDetails.addEventListener('click', openSheet);
      openers.forEach(btn => btn.addEventListener('click', openSheet));
      btnClose.addEventListener('click', closeSheet);
      overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSheet(); });
      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSheet(); });

      tabs.addEventListener('click', (e) => {
        const tab = e.target.closest('.tab');
        if (!tab) return;
        tabs.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        const target = tab.getAttribute('data-tab');
        document.querySelectorAll('.tab-panel').forEach(p => {
          p.hidden = p.getAttribute('data-panel') !== target;
        });
      });
    </script>
  </body>
  </html>


